<template>
  <div>
    <ymm-content title="角色管理">
      <template slot="toolbar">
        <ymm-toolbar @add="onAdd" @handleInput="onInput"/>
      </template>
      <template>
        <role-table :roles="roles" @update="onUpdate" @delete="onDelete" @assign="onAssign"/>
        <ymm-pagination :total="total" @sizeChange="onSize" @numChange="onNum"/>
      </template>
    </ymm-content>

    <!--  添加/更新对话框  -->
    <role-dialog :is-show="isShow" :role="role" :is-add="isAdd" @handleSubmit="onSubmit"
                 @handleClose="role={}" @closeDialog="isShow=false"/>
    <perm-dialog @closeDialog="permShow=false" :perm-show="permShow" :id="rowId"/>
  </div>
</template>

<script>
import YmmContent from "@/components/common/ymm-content";
import YmmToolbar from "@/components/common/ymm-toolbar";
import YmmPagination from "@/components/common/ymm-pagination";
import RoleTable from "@/views/system/role/role-table";
import RoleDialog from "@/views/system/role/role-dialog";
import PermDialog from "@/views/system/role/perm-dialog";
import {pageRoles, saveRole, modifyRoles, removeRoles} from "@/api/systrm-role";

export default {
  components: {YmmContent, YmmToolbar, RoleTable, RoleDialog, YmmPagination, PermDialog},
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      roleName: '',
      roles: [],
      total: 0,
      role: {},
      isShow: false,
      isAdd: true,
      permShow: false,
      rowId: 0
    }
  },
  methods: {
    getRoles() {
      pageRoles(this.pageNum, this.pageSize, this.roleName).then(res => {
        this.roles = res.rows
        this.total = res.total
      }).catch(err => {
      })
    },
    onAssign(id) {
      this.permShow = true
      this.rowId = id
    },
    onUpdate(role) {
      this.isShow = true
      this.role = role
      this.isAdd = false
    },
    onSubmit(role) {
      this.role = role
      if (this.isAdd) {
        saveRole(this.role).then(res => {
          this.isShow = false
          this.$message.success('添加成功')
          this.getRoles()
        }).catch(err => {
          this.$message.error('添加失败')
        })
      } else {
        modifyRoles(this.role).then(res => {
          this.isShow = false
          this.$message.success('编辑成功')
          this.getRoles()
        }).catch(err => {
          this.$message.error('编辑失败')
        })
      }

    },
    onAdd() {
      this.isShow = true
      this.isAdd = true
    },
    onInput(content) {
      this.roleName = content
      this.pageNum = 1
      this.getRoles()
    },
    onSize(size) {
      this.pageSize = size
      this.getRoles()
    },
    onNum(num) {
      this.pageNum = num
      this.getRoles()
    },
    onDelete(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRoles(id).then(res => {
          this.$message.success('删除成功')
          this.getRoles()
        }).catch(err => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    }
  },
  created() {
    this.getRoles()
  }
}
</script>

<style scoped lang="less">

</style>
